<template>
  <div id="app">
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/sys-admin' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>修改商品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>    <el-card style="width: 700px;height: 900px;margin:0 auto">
      <el-form label-width="100px" :model="p" ref="p">
        <el-form-item label="商品id" >
          <el-input :readonly="true" type="text" v-model="p.id"></el-input>
        </el-form-item>
        <el-form-item label="商品标题" >
          <el-input type="text" v-model="p.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" >
          <el-input type="text" v-model="p.price"></el-input>
        </el-form-item>
        <el-form-item label="商品原价" >
          <el-input type="text" v-model="p.old_price"></el-input>
        </el-form-item>
        <el-form-item label="销量" >
          <el-input type="text" v-model="p.sale_count"></el-input>
        </el-form-item>
        <el-form-item label="库存" >
          <el-input type="text" v-model="p.num"></el-input>
        </el-form-item>
        <el-form-item label="商品类别id" prop="serverId">
        <el-select v-model="p.server_id" placeholder="请选择">
          <el-option
              v-for="item in serverIdList"
              :key="item.serveId"
              :label="item.serveName"
              :value="item.serveId">
          </el-option>
        </el-select>
      </el-form-item>
        <el-form-item label="到期日期" >
          <el-col :span="11">
            <el-date-picker value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" placeholder="商品赏味期限" v-model="p.day" style="width: 100%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="原商品图片">
          <a>
            <img class="p_img" :src=img width="100" height="120" alt="">
          </a>
        </el-form-item>
        <el-form-item label="新商品图片" prop="url">
          <el-upload
              name="pic"
              :limit="1"
              action="http://localhost:9081/product/upload"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <el-button type="primary" @click="update()">
            确认修改
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>

</template>

<script>
export default {
  data() {
    return {
      img: "",
      p: {id: '', title: '', price: '', old_price: '', sale_count: '', num: '', day: '', old_url: '',server_id:''},
      dialogImageUrl: "",
      dialogVisible: false,
      oldUrl: "",
      readonly:'',
      limit:'',
      serverIdList:[],
    }
  },
  methods:{
    goBack(){
      //返回上一页面
      history.back();
    },
    loadServerId(){
      console.log("开始执行loadServerId```")
      let url="http://localhost:9081/serve"
      console.log("url="+url)
      this.axios
          .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
          .get(url).then((response)=>{
        console.log("服务器返回的数据,放入serverIdList:")
        console.log(response.data)
        let responseBody = response.data;
        this.serverIdList=responseBody.data
      })
    },
    getParams(){
      // 取到路由带过来的参数
      const routerParams = this.$route.query.mallCode
      // 将数据放在当前组件的数据内
      this.p.id = routerParams;
    },
    update(){
      let url="http://localhost:9081/product/update"
      let formData = this.p;
      console.log(formData);
      this.axios
          .post(url,formData).then((response)=>{
        // location.href="http://localhost:8080/sys-product/temp/products/ProductList";
      })
      if(this.oldUrl!==this.p.url){
        let url="http://localhost://9081/product/deleteOldUrl"
        this.axios
            .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
            .post(url+this.oldUrl).then((response) =>{
        })
      }
    },
    handleRemove(file, fileList) {
      this.axios
          .create({"headers":{'Authorization':localStorage.getItem("jwt")}})
          .get("/remove?url="+file.response).then(() =>{
        this.$message.success("删除完成!")
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleSuccess(response,file,fileList){
      this.p.url=response;
    },
    load(){
      console.log("load()````")
      let url="http://localhost:9081/product/selectById"
      this.axios.get(url+location.search).then((response)=> {
        console.log("开始执行方法")
        console.log(response.data)
        this.p=response.data;
        this.oldUrl=this.p.url
        this.img= require('D:/Tedu/tedu/data-management-system/files'+this.oldUrl);
      })
    }
  },
  watch: {
    '$route': 'getParams'
  },
  mounted() {
    this.getParams();
    this.load();
    this.loadServerId();
  },

}
</script>

<style scoped>

</style>